<route lang="json5" type="page">
{
  layout: 'custom',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="text-center mt-16 text-20px flex flex-col">
        <view>个人中心</view>
        <view class="text-14px" v-if="showTibetan">བོད་ཀྱི་སྐདབོད་ཀྱི་སྐད</view>
      </view>
    </view>
    <view class="content-section">
      <view class="mine-actions flex">
        <view class="">
          <image
            :src="finalAvatarUrl"
            mode="widthFix"
            style="width: 20vw; border-radius: 10px"
            @error="onAvatarError"
            @click="handleToAvatar"
          ></image>
          <!-- <image v-else src="/src/static/person.png" mode="widthFix" style="width: 20vw; border-radius: 10px"></image> -->
        </view>
        <view class="ml-4 flex flex-justify-between flex-col py-2 text-#000">
          <view class="text-20px">{{ store.userInfo.userName }}</view>
          <view class="">{{ store.userInfo.groupName }}</view>
        </view>
      </view>
      <view class="bg-slate-100 px-4 pt-3">
        <view class="list-container">
          <view v-for="item in menuList" :key="item.path" class="mb-3">
            <view
              class="flex bg-white items-center justify-between p-3 mb-2"
              @click="goDetailPage(item.path, item.isTab, item.needUserId)"
            >
              <view class="flex-1 text-4 text-dark flex">
                <view
                  class="iconfont mx-4 flex justify-center items-center"
                  :class="item.icon"
                  :style="{ color: item.color, fontSize: '26px' }"
                ></view>
                <view class="zh-tb-text">
                  <text class="text-center text-#000 font-semibold text-4">{{ item.title }}</text>
                  <text class="text-center">{{ item.tibetanTitle }}</text>
                </view>
              </view>

              <text class="i-carbon-chevron-right"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="flex justify-center">
      <wd-button type="error" size="large" @click="handleLogout" custom-class="custom-shadow">
        <view class="zh-tb-text text-#fff">
          <text>退出登录</text>
          <text style="color: #fff">བོད་ཀྱི་སྐད་</text>
        </view>
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'

const store = useUserStore()
const showTibetan = import.meta.env.VITE_SHOW_TIBETAN === 'true'

const menuList = [
  {
    title: '意见列表',
    tibetanTitle: 'བོད་ཀྱི་སྐད',
    path: 'pages/palmAdvice/index', // 不能带 query 参数
    icon: 'icon-yonghuyijianliebiao',
    color: '#087bd5',
    isTab: true,
    needUserId: true, // 👈 自定义字段：表示是否需要传 userId
  },
  {
    title: '账号设置',
    tibetanTitle: 'བོད་ཀྱི་སྐད',
    path: 'pages/mine/setting/index',
    icon: 'icon-zhanghaoshezhi',
    color: '#52db77',
    isTab: false,
    needUserId: false, // 👈 自定义字段：表示是否需要传 userId
  },
]
const defaultAvatar = '/static/person.png'
const avatarLoadFailed = ref(false)
// 响应式头像地址（优先用户头像）
const finalAvatarUrl = computed(() => {
  if (avatarLoadFailed.value) return defaultAvatar
  return store.userAvatar || defaultAvatar
})

// 加载失败时兜底
const onAvatarError = () => {
  avatarLoadFailed.value = true
}
// 头像变化时重置错误状态（关键）
watch(
  () => store.userAvatar,
  () => {
    avatarLoadFailed.value = false
  },
)
const goDetailPage = (path: string, isTab: boolean, needUserId = false) => {
  // 👇 判断是否需要传 userId
  if (needUserId && store.isRepresentative === 1) {
    uni.setStorageSync('representativeId', store.userInfo.userId)
  } else {
    uni.removeStorageSync('representativeId')
  }
  const url = `/${path}`
  if (isTab) {
    uni.switchTab({ url })
  } else {
    uni.navigateTo({ url })
  }
}

// ========== 初始化 =========

const windowHeight = computed(() => {
  return uni.getSystemInfoSync().windowHeight - 50
})

const handleToInfo = () => {
  uni.navigateTo({ url: '/pages/mine/info/index' })
}

const handleToEditInfo = () => {
  uni.navigateTo({ url: '/pages/mine/info/edit' })
}

const handleToSetting = () => {
  uni.navigateTo({ url: '/pages/mine/setting/index' })
}

const handleToLogin = () => {
  uni.reLaunch({ url: '/pages/login/index' })
}

const handleToAvatar = () => {
  console.log('点击了')
  uni.navigateTo({ url: '/pages/mine/avatar/index' })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定注销并退出系统吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        store.logout().then(() => {
          uni.reLaunch({ url: '/pages/login/index' })
        })
      }
    },
  })
}

onMounted(() => {
  console.log('store', store.userAvatar)
})
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.message-list {
  display: flex;
  width: 600rpx;
  height: 900rpx;
  flex-direction: column;
  margin: 20rpx;

  .message-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--el-border-color-light);

    &:last-child {
      border: none;
    }

    .message-icon {
      width: 90px;
      height: 40px;
      margin: 0 20px 0 5px;
    }

    .message-content {
      display: flex;
      flex-direction: column;

      .message-title {
        margin-bottom: 5px;
      }

      .message-date {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    height: 30%;
    padding: 15px 15px 45px 15px;
    // background: linear-gradient(180deg,
    // 		rgba(255, 0, 0, 1) 0%, // 顶部纯红色

    // 		rgba(255, 0, 0, 0.5) 100% // 渐变到透明
    // 	);
    background: red;
    color: white;
  }

  .content-section {
    position: relative;
    top: -80px;

    .mine-actions {
      margin: 15px 30px 0;
      padding: 10px 20px;
      border-radius: 8px;
      background-color: white;
    }
  }
}

.custom-shadow {
  width: 60vw;
  display: block;
}
</style>
